<template>
  <div>
   <div id="main_maps"></div>
  </div>
</template>
<script>
let echarts = require("echarts");
import taskApi from "../../requestApi/taskApi";
import dateModel from "../../components/Module/dateModel";
import { Toast } from "mint-ui";

export default {
  components: { dateModel },
  data() {
    return {
      Query: {
        area: "宝塔区",
        street: "- -",
        community: "- -",
        grid: "- -",
        type: "- -",
        userType: "- -"
      },
      isechartsnavboxitemSelect: 1,
      dataNavList: ["饼状图", "柱状图", "折线图"],
      colorLists: ["#DFB885", "#88CFC7", "#DF87CF", "#EF8484", "#9DCB96"],
      yLists: [],
      yList2s: [5, 4, 8, 9, 5, 5, 5, 5, 5, 5, 5, 5],
      dataList: [
        { name: "18-25", id: "0", value: 2, color: "#DFB885" },
        { name: "26-30", id: "1", value: 3, color: "#88CFC7" },
        { name: "31-40", id: "2", value: 1, color: "#DF87CF" },
        { name: "41-50", id: "3", value: 4, color: "#EF8484" },
        { name: "50以上", id: "4", value: 3, color: "#9DCB96" },
        { name: "50以上", id: "4", value: 9, color: "#9DCB96" },
        { name: "50以上", id: "4", value: 5, color: "#9DCB96" },
        { name: "50以上", id: "4", value: 2, color: "#9DCB96" },
        { name: "50以上", id: "4", value: 7, color: "#9DCB96" },
        { name: "50以上", id: "4", value: 1, color: "#9DCB96" },
        { name: "50以上", id: "4", value: 1, color: "#9DCB96" },
        { name: "50以上", id: "4", value: 1, color: "#9DCB96" }
      ],
      xLists: [
        "2",
        "4",
        "6",
        "8",
        "10",
        "12",
        "14",
        "16",
        "18",
        "20",
        "22",
        "24"
      ]
    };
  },
  created: function() {
    this.yLists = this.dataList.map(e => {
      return e.value;
    });
  },
  mounted() {
    this.mapListsFun();
  },
  methods: {
    mapListsFun() {
      let self = this;
      let eComVisitChart = echarts.init(document.getElementById("main_maps"));
      eComVisitChart.setOption({
        xAxis: {
          name: "时间",
          type: "category",
          data: self.xLists,
          boundaryGap: false,
          axisLabel: {
            interval: 0,
            rotate: -50
          },
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#000",
            padding: [5, 0, 0, -5]
          },
          axisLine: {
            name: "时间",
            // 坐标轴 轴线
            show: true, // 是否显示
            symbol: ["none", "arrow"], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置
            // ------   线 ---------
            lineStyle: {
              color: "#ccc",
              width: 1,
              type: "solid"
            }
          }
        },
        yAxis: {
          name: "(人数)",
          type: "value"
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: "#FFB925",
                //以下为是否显示
                label: {
                  show: false
                }
              }
            },
            silent: true,
            data: self.yLists,
            type: "line"
          },
          {
            itemStyle: {
              normal: {
                color: "red",
                //以下为是否显示
                label: {
                  show: false
                }
              }
            },
            silent: true,
            data: self.yList2s,
            type: "line"
          }
        ]
      });
    }
  },
  filters: {},
  watch: {},
  computed: {}
};
</script>
<style scoped>
/* 图表 */
.echarts_main {
  height: 280px;
  width: calc(100% - 0.8rem);
  margin-left: 0.4rem;
  overflow: hidden;
}
#main_maps {
  width: 100%;
  height: 260px;
  overflow: hidden;
}

.box_main_echarts {
  width: 100%;
  height: 435px;
  overflow: hidden;
  position: relative;
}
/* 图表 */
</style>
